<template>
    <div>
        <div id="app">
        <div class="add">
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="productName">
            <br>
            产品图片地址:<input type="text" v-model="imgSrc">

            价格:<input type="text" v-model="price">
            <input type="button" value="添加" @click="add">
        </div>
        <div class="add">
            品牌名称:<input type="text" placeholder="请输入搜索条件">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>
                        <input type="checkbox" v-model="allCheck" @change="allCheckChange">
                        全选
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <!-- 动态生成内容tr -->
                <tr v-for="(item,index) in products" :key="item.id">
                    <td>
                        <input type="checkbox" v-model="checks" name="" id="" :value="item">
                    </td>
                    <td>
                        <img width="100" :src="item.imgSrc"  alt="">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.productName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button @click="decrease(item)" :disabled="item.count==0">-</button>
                        &nbsp;
                        {{item.count}}
                        &nbsp;
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </table>
            <div class="add" style="text-align: center;" v-show="!products.length">没有更多数据了</div>
            <h1 class="add" style="text-align:right;">总价格:{{total}}</h1>
        </div>
        <!-- {{checks}} -->
    </div>
    </div>  
</template>
<script>
export default{
     data(){
        return{
            allCheck:false,
            checks:[],
            code: "",
            productName: "",
            imgSrc: "",
            price: "",
            products:[
                    {
                        id:1,
                        imgSrc:"https://img2.baidu.com/it/u=1086420382,2044578525&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=329",
                        code:"eee",
                        productName:"容嬷嬷的爱",
                        count:10,
                        price:"9.9"
                    },
                    {
                        id:2,
                        imgSrc:"https://img1.baidu.com/it/u=1804182115,1652496351&fm=253&fmt=auto&app=120&f=JPEG?w=504&h=500",
                        code:"333",
                        productName:"蒋文的爱心野菜",
                        count:1,
                        price:"5.2"
                    },
                    {
                        id:3,
                        imgSrc:"https://img1.baidu.com/it/u=1750404102,2975729998&fm=253&fmt=auto&app=120&f=JPEG?w=442&h=248",
                        code:"233",
                        productName:"张翰爱你哟",
                        count:1,
                        price:"999"
                    },
                ]
        }
     },
     computed:{
        total(){
            let res=this.checks.reduce((total,item)=>{
                return total+=item.price*item.count
            },0)
            return res.toFixed(2)
        }
     },
     watch:{
        checks(newChecks){
           console.log(newChecks)
           if(newChecks.length===this.products.length){
            this.allCheck=true
           }else{
            this.allCheck=false
           }
}     },
     methods:{
        increase(current){
           current.count++
        },
        decrease(current){
           current.count--
        },
        del(index){
            this.products.splice(index,1)
        },
        add(){
            if(!this.code || !this.imgSrc || !this.price || !this.productName){
                return;
            }
            let obj={
                id:Math.random().toString(32).substring(2),
                imgSrc:this.imgSrc,
                code:this.code,
                productName:this.productName,
                count:1,
                price:this.price
            }
            this.products.push(obj)
        },
        allCheckChange(){
            if(this.allCheck){
                this.checks=this.products
            }else{
                this.checks=[]
            }
        }
     }
}
</script>
<style>
    #app {
        width: 600px;
        margin: 10px auto;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: #0094ff;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>